<!--每一个新闻块组件-->
<template>
    <div class="main">
      <div class="top">
        <img :src="article.featured_image" class="news-img" alt="新闻图片" />
      </div>
      <div class="bottom">
        <div class="title">
          <router-link :to="`${path}/details/${article.article_id}`">
            {{ truncatedTitle(article.title) }}
          </router-link>
        </div>
        <div class="date">
          <img src="../assets/时间.png" class="date-icon"/>
          <p>{{ formattedDate(article.publish_date) }}</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  props: ["article",'path'],//父组件传递的新闻文章

  methods: {
    //截断标题
    truncatedTitle(title) {
      const maxLength = 30;
      if (title.length > maxLength) {
        return title.slice(0, maxLength) + "...";
      }
      return title;
    },
    formattedDate(date) {
      return date.slice(0, 10); // 只保留 "YYYY-MM-DD"
    }
  },
};
</script>

<style scoped>
.main {
  width: 350px;
  height: 410px;
  padding: 8px;
  box-shadow: 0 0 4px rgba(128, 128, 128, 0.5);


}

.top {
  width: 350px;
  height: 290px;
  overflow: hidden;
}

.bottom {
  width: 350px;
  height: 110px;
  margin: 2px 0;
}

.title {
  position: relative;
  display: inline-block;
  width: 340px;
  height: 60px;
  padding-top: 30px; /* 添加空间以容纳短线 */
  cursor: pointer;
}

.main .bottom .title a{
  font-size: 15px;
}

.date-icon{
  width: 25px;
  height: 25px;
}

.title:before {
  content: "";
  position: absolute;
  top: 0; /* 设置为文本上方 */
  left: 0;
  width: 20%; /* 初始宽度为容器宽度的一半 */
  height: 4px;
  background-color: #2b547e;
  transform: scaleX(1);
  transform-origin: left center;
  transition: width 0.3s ease; /* 仅对宽度进行过渡效果 */
}

.news-img {
  width: 100%;
  height: 290px;
  transition: all 0.3s ease 0s;
}

.date {
  width: 100%;
  height: 5px;
  display: flex;
  margin: 4px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.3s ease 0s;
}


.main:hover .bottom .title a {
  color: rgb(221, 172, 9); /* 标题颜色变化 */
  font-size: 16px; /* 调整字体大小 */
}

.main .bottom .title a {
  text-decoration: none;
  color: black;
  transition: all 0.3s ease 0s;
}

.main:hover .title:before {
  width: 95%; /* 扩展短线至容器宽度 */
}

.main:hover .top img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.main:hover .date {
  transform: scale(1.1);
}
</style>
